// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'



// 引入css文件
import "./index.css"

//表单处理 form-handler
// 非受控组件
//说明:借助 ref ,使用原生DOM方式来获取表单元素值
//ref的作用: 获取DOM或组件

class MyApp extends React.Component {
    constructor() {
        super()
        //穿件txtRef对象
        this.txtRef = React.createRef()
    }
    //获取文本框的值
    geTxt = () => {
        console.log("获取文本框的值:", this.txtRef.current.value)
    }
    render() {
        return (
            <div>

                <input type="text" ref={this.txtRef} />
                <button onClick={this.geTxt}>获取文本框的值</button>
            </div>
        )
    }

}


// React组件基础-总结
//1 组件的两种创建方式: 函数式组件 类组件
//2 无状态(函数组件)  负责箭头结构展示
//3 有状态(类)组件    负责更新UI 让页面动起来
//4 绑定事件主要this 指向问题
//5 推荐使用受控组件来处理表单
//6 完全利用JS语言的能力创建组件 这就是React的思想

//3 渲染react元素
ReactDOM.render(<MyApp />, document.getElementById('root'))
